@extends('layouts.index')
@section('title',trans('web.course'))
    @section('content')
        <div class="main-container">
            <div>
                <section class="related-cases span14" id="related-cases">
                    <div class="related-cases__fill span2 hide-mobile"></div>
                    <div class="related-cases__top span12 span14-mobile">
                        <h2 class="related-cases__title course-title">@lang('web.course_list')</h2>
                        <div class="live-judging__head__content__buttons list-left"><a class="button button--dark button--go" href="{{route('course_upload')}}">@lang('web.course_upload')</a></div>
                       <!--分类开始 -->
                        
                        <!--分类结束-->
                    </div>
                    <div class="panel-heading">
                            <ul class="list-inline topic-filter">
                                <li class="popover-with-html"  data-original-title="" title="" ><a class="{{active_class($category_id===null)}}" href="{{route('course_list')}}">@lang('web.all')</a></li>
                                <li class="popover-with-html"  data-original-title="" title=""><a class="{{active_class($category_id==1)}}" href="{{route('course_list',['category_id'=>1])}}">@lang('web.painting')</a></li>
                                <li class="popover-with-html"  data-original-title="" title="" ><a class="{{active_class($category_id==0&&$category_id!=null)}}" href="{{route('course_list',['category_id'=>0])}}">@lang('web.photography')</a></li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    <ul class="row list-group topic-list related-cases__case-holder span12 span14-mobile" id="load">

                    </ul>
                </section>
                <a href="javascript:void(0)" onclick="load_more()" class="related-cases__load-more span8 span100p-mobile pixel-pattern"><span class="span2 span4-mobile related-cases__load-more__arrow-holder"><span class="related-cases__load-more__arrow"></span></span>
                    <!-- react-text: 7373 -->
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;" id="no_more">@lang('web.load_more')</font>
                    </font>
                    <!-- /react-text -->
                </a>
            </div>
            <div class="cf"></div>
        </div>
        <script>
            var page=1;
            var category_id='{{$category_id or ''}}';
            function load_more(){
                $.get('{{route('course.get_more')}}',{page:page++,category_id:category_id},function(data){
                    if(data){
                        $("#load").html($("#load").html()+data);
                    }else{
                        $("#no_more").html('{{trans('web.no_more')}}');
                    }
                })
            }
            load_more();
        </script>
        @endsection